<template>
	<div class="pro_div">
		<div class="img_top">
			<img :src="back_img.img" alt="" />
			<span> {{back_img.intro}} </span>
		</div>
		<div class="flex-c-c-c" style="width: 100%; height: 100px">
			<span style="color: #534036; font-size: 40px; margin-top: 40px">产品中心</span>
			<img src="../assets/bl.svg" style="width: 64px; height: auto; margin-top: 28px" />
		</div>
		<div class="flex-r-c-s" style="margin: 50px 0;">
			<div style="width: 360px;height:1490px;background-color: #b69b8c;overflow: hidden;" class="divs_mume">
				<el-menu default-active="0-0" class="el-menu-vertical-demo" background-color="#b69b8c"
					text-color="#ffffff" :unique-opened="true" active-text-color="#B6633ACB">
					<el-submenu v-for="(v,i) in tit_list" :key="i" :index="''+i+''">
						<template slot="title">
							<span style="font-size: 24px;">{{v.cname}}</span>
						</template>
						<el-menu-item-group>
							<el-menu-item v-for="(v1,i1) in v.second" :key="i1" :index="i+'-'+i1" @click="fn(v1)">
								<span style="font-size: 18px;">{{v1.cname}}</span>
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</el-menu>
			</div>
			<!-- <div class="flex-r-c-c" style="width:1100px;flex-wrap: wrap!important;justify-content: left!important;"
				v-if="list.data.length!=0">
				<div v-for="(v,i) in list.data" :key="i" class="flex-c-c-c cur" @click="canping(v)"
					style="width: 295px;height: 350px;margin-bottom: 30px;margin-left: 50px;">
					<div class="flex-c-c-c" style="width: 295px;height: 310px;overflow: hidden;">
						<img :src="v.img" style="width: 295px;height: auto;">
					</div>
					<span style="font-size: 24px;color: #000;line-height: 40px;">
						{{v.title}}
					</span>
				</div>
			</div> -->
			<!-- <div v-else style="width:1100px;">
				<el-empty description="该分类暂无商品"></el-empty>
			</div> -->
		</div>
		<div class="flex-c-c-c" style="width: 100%; height: 100px; margin-top: 123px">
			<div>
				<el-pagination background layout="total, prev, pager, next, jumper" :total="list.total"
					:page-size="list.per_page" hide-on-single-page @current-change='fn_fenye'>
				</el-pagination>
			</div>
		</div>
		<div class="flex-c-c-c"
			style="width: 100%;height: 100vh;position: fixed;top: 0;left: 0;background-color: #46464287;" v-if="is"
			@click="is=false">
			<div class="flex-c-c-c cur"
				style="padding: 20px;width: 830px;height: 700px;background-color: #FFFFFF;border-radius: 20px;overflow: hidden;"
				@click.stop>
				<div v-html="sp_obj.content" class="img_fwb">

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Message,
		MessageBox
	} from 'element-ui';
	export default {
		data() {
			return {
				back_img: {},
				tit_list: [],
				obj: {
					id: null,
					page: 0
				},
				list: {},
				sp_obj: {},
				is: false
			};
		},
		mounted() {
			let headers = {
				token: this.$md5(this.$key + this.$dataTime()),
				rtimes: this.$dataTime(),
				btype: 'goods'
			}
			this.$axios.post(this.$base + '/Index/getBg', headers).then((res) => {
					if (res.data.code == 2000) {
						this.back_img = res.data.data
					} else {
						Message.error(res.data.msg);
					}
					console.log(res)
				})
				.catch(function(error) {
					Message.error(error.message);
				});
			headers.title = 'goods'
			this.$axios.post(this.$base + '/Index/getWebInfo', headers).then((res) => {
					if (res.data.code == 2000) {
						var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
						link.type = 'image/x-icon';
						link.rel = 'shortcut icon';
						link.href = res.data.data.ico;
						document.title = res.data.data.web_title
						document.getElementsByTagName('head')[0].appendChild(link);
					} else {
						Message.error(res.data.msg);
					}
					console.log(res)
				})
				.catch(function(error) {
					Message.error(error.message);
				});
			this.type_fl_fn()
		},
		methods: {
			fn_fenye(el) {
				this.obj.page = el
				this.qingqiu()
			},
			fn(el) {
				if (el.id == this.obj.id) return
				this.obj = {
					id: el.id,
					page: 0
				}
				this.obj.page = this.obj.page + 1
				this.qingqiu()
			},
			qingqiu() {
				let headers = {
					token: this.$md5(this.$key + this.$dataTime()),
					rtimes: this.$dataTime(),
					id: this.obj.id,
					page: this.obj.page
				}
				this.$axios.post(this.$base + '/Goods/goodsLists', headers).then((res) => {
						if (res.data.code == 2000) {
							console.log(res.data.data)
							this.list = res.data.data
						} else {
							Message.error(res.data.msg);
						}
						console.log(res)
					})
					.catch(function(error) {
						Message.error(error.message);
					});
			},
			type_fl_fn() {
				let headers = {
					token: this.$md5(this.$key + this.$dataTime()),
					rtimes: this.$dataTime(),
				}
				this.$axios.post(this.$base + '/Goods/goodsClass', headers).then((res) => {
						if (res.data.code == 2000) {
							this.tit_list = res.data.data
							console.log(res.data.data)
							this.obj = {
								id: res.data.data[0].second[0].id,
								page: 0
							}
							this.obj.page = this.obj.page + 1
							this.qingqiu()
						} else {
							Message.error(res.data.msg);
						}
						console.log(res)
					})
					.catch(function(error) {
						Message.error(error.message);
					});
			},
			canping(v) {
				let headers = {
					token: this.$md5(this.$key + this.$dataTime()),
					rtimes: this.$dataTime(),
					id: v.id
				}
				this.$axios.post(this.$base + '/Goods/goodsDetails', headers).then((res) => {
						if (res.data.code == 2000) {
							this.is = true
							this.sp_obj = v
						} else {
							Message.error(res.data.msg);
						}
						console.log(res)
					})
					.catch(function(error) {
						Message.error(error.message);
					});
			}
		}
	};
</script>

<style lang="less" scoped>
	.img_top {
		width: 100%;
		height: 500px;
		overflow: hidden;
		position: relative;

		img {
			width: 100%;
			height: auto;
		}

		span {
			position: absolute;
			left: 346px;
			top: 180px;
			line-height: 80px;
			font-size: 40px;
			color: #dcdcdc;
			letter-spacing: 10px;
			font-weight: 600;
		}
	}

	.divs_mume {
		/deep/ .el-menu {
			border-width: 0px;
		}

		/deep/.el-submenu__icon-arrow {
			color: #000;
		}

		/deep/.el-icon-arrow-down {
			color: #000;
		}
	}
	.img_fwb /deep/ img{
			height: 700px !important;
			width:auto !important;
	}
</style>
